<template>
    <el-drawer
        :title="title"
        :visible.sync="show_dialog"
        direction="rtl"
        size="60%"
        custom-class="demo-drawer"
        ref="drawer">
        <div class="demo-drawer__content" ref="content">
            <el-form :model="form" :rules="rules" v-if="show_dialog" label-width="140px" ref="editDrawer">
                <el-form-item label="线路ID:" prop="line_index">
                    <el-input autocomplete="off" v-model.number="form.line_index" maxlength="10" @input="handleNumber('line_index')"></el-input>
                </el-form-item>
                <el-form-item label="线路号码:" prop="line_number">
                    <el-input autocomplete="off" v-model="form.line_number" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="线路名称:"  prop="line_name">
                    <el-input autocomplete="off" v-model="form.line_name" maxlength="50"></el-input>
                </el-form-item>
                <el-form-item label="状态:" prop="status">
					<el-select v-model="form.status" placeholder="请选择">
                        <el-option
                            v-for="item in statusType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>                   
                <el-form-item label="供应商:" prop="supplier_id" >
                    <el-select v-model="form.supplier_id" placeholder="请选择">
                        <el-option
                            v-for="item in supplierList"
                            :key="item.ServiceSuppliersID"
                            :label="item.SuppliersName"
                            :value="item.ServiceSuppliersID"
                        ></el-option>
                    </el-select>
                </el-form-item>                 
                <el-form-item label="备注:" prop="remark">
                     <el-input v-model="form.remark"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="demo-drawer__footer">
            <el-button @click="closeDrawer">取 消</el-button>
            <el-button
                type="primary"
                @click="handleSubmit"
                :loading="loading"
                v-show="type!=='show'"
            >{{ loading ? "提交中 ..." : "确 定" }}</el-button>
        </div>
    </el-drawer>
</template>
<script>
export default {
    props: ['dialog'],
    data() {
        return {
            loading: false,
            show_dialog: false, //弹窗显示
            title:'新增',
            form: {
                line_index: "",
                line_number: "",
                line_name: "",
                status: "",
                supplier_id: "",
                remark: ""
            },
            statusType:[
                {value:'1', label:'关闭'},
                {value:'2', label:'开通'}
            ],
            supplierList: [],
            rules: {
                line_index: [
                    { required: true, message: '线路ID不能为空', trigger: 'blur' }
                ],
                line_number: [
                    { required: true, message: '线路号码不能为空', trigger: 'blur' }
                ],
                line_name: [
                    { required: true, message: '线路名称不能为空', trigger: 'blur' }
                ],
                status: [
                    { required: true, message: '请选择线路状态', trigger: 'change' }
                ],                                
                supplier_id: [
                    { required: true, message: '请选择供应商', trigger: 'change' }
                ]
            },
            type: '',
            row: ''
        }
    },
    methods: {
        handleNumber(val) {
            this.form[val] = this.form[val].toString().replace(/[^\d]/g, '')
        },
        supplierListFn() {
            this.$http.post("/admin/dataService/index.php?act=callLine&op=getSupplierList").then(res => {
                if (res.code == 1) {
                    this.supplierList = res.data;
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(err => {
                this.$message.error(`${err}`);
            })
        },
        show_dialog_fn(type, row) {
            this.type = type;
            this.show_dialog = true;
            this.loading = false;
            if (type === 'add') {
                this.title = '新增';
                this.form = {
                    line_index: "",
                    line_number: "",
                    line_name: "",
                    status: "",
                    supplier_id: "",
                    remark:''
				};
            } else if (type === 'edit') {
                this.title = '编辑';
                this.row = row;
                this.getDetail(row.id)
            }
        },
        closeDrawer() {
            this.loading = false
            this.show_dialog = false
        },
        handleSubmit() {
            this.$refs.editDrawer.validate(valid => {
                if (valid) {
                    this.loading = true;
                    const data = { ...this.form }
                    this.handleDrawer(data);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })

        },
        getDetail(id) {
            this.$http.post("/admin/dataService/index.php?act=callLine&op=getLineDetail", { id }).then(res => {
                if (res.code != 1) {
                    this.$message.warning(res.msg);
                    this.closeDrawer()
                    return;
                }
                this.form = res.data;
            }).catch(err => {
                this.$message.error(`${err}`);
            })
        },
        handleDrawer(data) {
            this.$http.post("admin/dataService/index.php?act=callLine&op=saveLine", data).then(res => {
                if (res && res.code == 1) {
                    this.closeDrawer()
                    this.$parent.getData();
                    this.$message.success(res.msg);
                } else {
                    this.loading = false;
                    this.$message.warning(res.msg)
                }
            }).catch(err => {
                this.loading = false;
                this.$message.error(`${err}`);
            })
        }
    },
    created() {
		this.supplierListFn();
    }
}
</script>

<style lang="scss" scoped>
.el-form {
    // width: 560px;
    padding-left: 10px;
}

.el-select /deep/.el-input {
    width: 360px;
}
.plantTable /deep/.el-input {
    width: auto;
}
form /deep/.el-input {
    width: 360px;
}

.demo-drawer__content {
    position: absolute;
    top: 0;
    bottom: 60px;
    width: 100%;
    overflow-y: auto;
}

/deep/.el-drawer__body {
    position: absolute;
    top: 77px;
    bottom: 0;
    width: 100%;
    overflow: auto;
    padding-bottom: 60px;
}

.demo-drawer__footer {
    position: absolute;
    bottom: 20px;
    left: 30px;
}

.avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader /deep/.el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.row_line {
    border-bottom: 1px dashed #d7d8dc;
}
.goodsInfo {
    display: flex;
    align-items: center;
}
</style>
